<template>
  <div class="voiceprint-index">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>声纹识别系统</h1>
      <p>基于深度学习的声纹识别与语音验证技术</p>
    </div>

    <!-- 功能概览卡片 -->
    <div class="overview-section">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-microphone"></i>
            </div>
            <div class="card-content">
              <h3>{{ registeredVoices }}</h3>
              <p>注册声纹数量</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-fingerprint"></i>
            </div>
            <div class="card-content">
              <h3>{{ recognitionAccuracy }}%</h3>
              <p>识别准确率</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="card-content">
              <h3>{{ verificationCount }}</h3>
              <p>今日验证次数</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="card-content">
              <h3>{{ suspiciousDetected }}</h3>
              <p>可疑语音检测</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="action-grid">
        <div class="action-item" @click="showAddVoiceprintModal">
          <div class="action-icon">
            <i class="fas fa-user-plus"></i>
          </div>
          <h3>添加声纹</h3>
          <p>录制并添加新的声纹</p>
        </div>
        <div class="action-item" @click="showVerifyVoiceprintModal">
          <div class="action-icon">
            <i class="fas fa-balance-scale"></i>
          </div>
          <h3>验证声纹</h3>
          <p>录制或上传音频验证声纹</p>
        </div>
        <div class="action-item" @click="navigateToAnalysis">
          <div class="action-icon">
            <i class="fas fa-search"></i>
          </div>
          <h3>可疑通话分析</h3>
          <p>分析可疑通话内容</p>
        </div>
        <div class="action-item" @click="showLiveRecognition">
          <div class="action-icon">
            <i class="fas fa-microphone-alt"></i>
          </div>
          <h3>实时识别</h3>
          <p>开始实时声纹识别</p>
        </div>
      </div>
    </div>

    <!-- 声纹库管理 -->
    <div class="voiceprint-library">
      <div class="section-header">
        <h2>声纹库管理</h2>
        <button class="btn btn-primary" @click="showAddVoiceprintModal">
          <i class="fas fa-plus"></i> 添加声纹
        </button>
      </div>
      
      <div class="library-grid">
        <div 
          v-for="voiceprint in voiceprintList" 
          :key="voiceprint.id"
          class="voiceprint-card"
        >
          <div class="card-header">
            <div class="user-info">
              <div class="voiceprint-icon">
                <i class="fas fa-microphone"></i>
              </div>
              <div class="info-content">
                <h4>{{ voiceprint.name }}</h4>
                <p>{{ voiceprint.relationship }}</p>
              </div>
            </div>
            <div class="card-actions">
              <button class="btn-icon" @click="editVoiceprint(voiceprint)">
                <i class="fas fa-edit"></i>
              </button>
              <button class="btn-icon" @click="deleteVoiceprint(voiceprint.id)">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
          <div class="card-content">
            <div class="voice-info">
              <div class="info-item">
                <span class="label">音频长度：</span>
                <span class="value">{{ voiceprint.duration }}s</span>
              </div>
              <div class="info-item">
                <span class="label">注册时间：</span>
                <span class="value">{{ formatDate(voiceprint.createdAt) }}</span>
              </div>
              <div class="info-item">
                <span class="label">质量评分：</span>
                <span class="value">{{ voiceprint.quality }}/100</span>
              </div>
            </div>
            <div class="voice-actions">
              <button class="btn btn-sm" @click="playVoiceprint(voiceprint)">
                <i class="fas fa-play"></i> 播放
              </button>
              <button class="btn btn-sm" @click="verifyWithVoiceprint(voiceprint)">
                <i class="fas fa-vial"></i> 验证
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近检测记录 -->
    <div class="recent-detections">
      <h2>最近检测记录</h2>
      <div class="detection-table">
        <table>
          <thead>
            <tr>
              <th>检测时间</th>
              <th>检测类型</th>
              <th>目标声纹</th>
              <th>相似度</th>
              <th>结果</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in recentDetections" :key="record.id">
              <td>{{ formatDateTime(record.timestamp) }}</td>
              <td>{{ record.type }}</td>
              <td>{{ record.targetName }}</td>
              <td>
                <div class="similarity-bar">
                  <div 
                    class="similarity-fill" 
                    :style="{width: record.similarity + '%'}"
                    :class="getSimilarityClass(record.similarity)"
                  ></div>
                  <span class="similarity-text">{{ record.similarity }}%</span>
                </div>
              </td>
              <td>
                <span 
                  class="result-badge" 
                  :class="record.result.toLowerCase()"
                >
                  {{ record.result }}
                </span>
              </td>
              <td>
                <button class="btn btn-sm" @click="viewDetectionDetail(record)">
                  <i class="fas fa-eye"></i> 查看
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加声纹模态框 -->
    <div v-if="showAddModal" class="modal-overlay" @click="closeAddModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加新声纹</h3>
          <button class="close-btn" @click="closeAddModal">×</button>
        </div>
        <div class="modal-body">
          <div class="add-voiceprint-form">
            <!-- 基本信息 -->
            <div class="form-group">
              <label for="voiceprintName">声纹名称</label>
              <input 
                id="voiceprintName"
                v-model="newVoiceprint.name" 
                type="text" 
                class="form-control" 
                placeholder="请输入声纹名称"
              />
            </div>
            <div class="form-group">
              <label for="voiceprintRelationship">关系</label>
              <select id="voiceprintRelationship" v-model="newVoiceprint.relationship" class="form-control">
                <option value="本人">本人</option>
                <option value="家人">家人</option>
                <option value="朋友">朋友</option>
                <option value="同事">同事</option>
                <option value="其他">其他</option>
              </select>
            </div>
            
            <!-- 录音区域 -->
            <div class="recording-section">
              <h4>录制声纹</h4>
              <div class="recording-area">
                <div class="recording-visual">
                  <div class="microphone-icon" :class="{active: isRecordingAdd}">
                    <i class="fas fa-microphone"></i>
                  </div>
                  <div class="wave-animation" v-if="isRecordingAdd">
                    <div class="wave"></div>
                    <div class="wave"></div>
                    <div class="wave"></div>
                  </div>
                </div>
                <div class="recording-info" v-if="recordingTime > 0">
                  <p>录制时长: {{ recordingTime }}秒</p>
                </div>
                <div class="recording-controls">
                  <button 
                    class="btn btn-primary" 
                    @click="toggleAddRecording"
                    :disabled="isProcessingAdd"
                  >
                    {{ isRecordingAdd ? '停止录音' : '开始录音' }}
                  </button>
                  <button 
                    class="btn btn-secondary" 
                    @click="clearAddRecording"
                    :disabled="isRecordingAdd"
                  >
                    清除
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 提交按钮 -->
            <div class="form-actions">
              <button 
                class="btn btn-primary" 
                @click="submitVoiceprint"
                :disabled="!canSubmitVoiceprint"
              >
                <i class="fas fa-save"></i> 保存声纹
              </button>
              <button class="btn btn-secondary" @click="closeAddModal">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 验证声纹模态框 -->
    <div v-if="showVerifyModal" class="modal-overlay" @click="closeVerifyModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>声纹验证</h3>
          <button class="close-btn" @click="closeVerifyModal">×</button>
        </div>
        <div class="modal-body">
          <div class="verify-voiceprint-form">
            <!-- 选择目标声纹 -->
            <div class="form-group" v-if="!selectedVoiceprint">
              <label>选择要验证的声纹</label>
              <div class="voiceprint-selection">
                                 <div 
                   v-for="voiceprint in voiceprintList" 
                   :key="voiceprint.id"
                   class="voiceprint-option"
                   @click="selectVoiceprintForVerify(voiceprint)"
                 >
                   <div class="option-icon">
                     <i class="fas fa-microphone"></i>
                   </div>
                   <div class="option-info">
                     <h4>{{ voiceprint.name }}</h4>
                     <p>{{ voiceprint.relationship }}</p>
                   </div>
                 </div>
              </div>
            </div>

            <!-- 已选择的声纹 -->
            <div class="selected-voiceprint" v-if="selectedVoiceprint">
              <h4>验证目标: {{ selectedVoiceprint.name }}</h4>
              <button class="btn btn-sm btn-secondary" @click="selectedVoiceprint = null">
                重新选择
              </button>
            </div>
            
            <!-- 录音区域 -->
            <div class="recording-section" v-if="selectedVoiceprint">
              <h4>选择验证方式</h4>
              
              <!-- 验证方式选择 -->
              <div class="verification-method">
                <label class="method-option">
                  <input 
                    type="radio" 
                    v-model="verificationMethod" 
                    value="record"
                    name="verificationMethod"
                  />
                  <span>录制声纹</span>
                </label>
                <label class="method-option">
                  <input 
                    type="radio" 
                    v-model="verificationMethod" 
                    value="upload"
                    name="verificationMethod"
                  />
                  <span>上传音频文件</span>
                </label>
              </div>

              <!-- 录音区域 -->
              <div class="recording-area" v-if="verificationMethod === 'record'">
                <div class="recording-visual">
                  <div class="microphone-icon" :class="{active: isRecordingVerify}">
                    <i class="fas fa-microphone"></i>
                  </div>
                  <div class="wave-animation" v-if="isRecordingVerify">
                    <div class="wave"></div>
                    <div class="wave"></div>
                    <div class="wave"></div>
                  </div>
                </div>
                <div class="recording-info" v-if="verifyRecordingTime > 0">
                  <p>录制时长: {{ verifyRecordingTime }}秒</p>
                </div>
                <div class="recording-controls">
                  <button 
                    class="btn btn-primary" 
                    @click="toggleVerifyRecording"
                    :disabled="isProcessingVerify"
                  >
                    {{ isRecordingVerify ? '停止录音' : '开始录音' }}
                  </button>
                  <button 
                    class="btn btn-secondary" 
                    @click="clearVerifyRecording"
                    :disabled="isRecordingVerify"
                  >
                    清除
                  </button>
                </div>
              </div>

              <!-- 音频文件上传区域 -->
              <div class="upload-area" v-if="verificationMethod === 'upload'">
                <div 
                  class="upload-zone"
                  :class="{ 'dragover': isDragOver }"
                  @drop="handleDrop"
                  @dragover.prevent
                  @dragenter.prevent="isDragOver = true"
                  @dragleave.prevent="isDragOver = false"
                  @click="triggerFileUpload"
                >
                  <input 
                    ref="fileInput"
                    type="file"
                    accept="audio/*"
                    @change="handleFileSelect"
                    style="display: none"
                  />
                  <div class="upload-content" v-if="!uploadedAudioFile">
                    <div class="upload-icon">
                      <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <h3>上传音频文件</h3>
                    <p>点击或拖拽音频文件到此区域</p>
                    <p class="upload-hint">支持 MP3、WAV、M4A 等格式</p>
                  </div>
                  <div class="file-info" v-if="uploadedAudioFile">
                    <div class="file-icon">
                      <i class="fas fa-file-audio"></i>
                    </div>
                    <div class="file-details">
                      <h4>{{ uploadedAudioFile.name }}</h4>
                      <p>大小: {{ formatFileSize(uploadedAudioFile.size) }}</p>
                      <p>时长: {{ audioDuration }}秒</p>
                    </div>
                    <button class="btn btn-sm btn-secondary" @click="clearUploadedFile">
                      <i class="fas fa-times"></i> 移除
                    </button>
                  </div>
                </div>
                
                <!-- 音频播放预览 -->
                <div class="audio-preview" v-if="uploadedAudioFile">
                  <audio 
                    ref="audioPlayer"
                    :src="audioPreviewUrl"
                    controls
                    @loadedmetadata="updateAudioDuration"
                  ></audio>
                </div>
              </div>
            </div>
            
            <!-- 验证进度 -->
            <div class="verification-progress" v-if="isProcessingVerify">
              <div class="progress-header">
                <h4>{{ verificationProgressText }}</h4>
                <span class="progress-percentage">{{ verificationProgress }}%</span>
              </div>
              <div class="progress-bar">
                <div 
                  class="progress-fill" 
                  :style="{ width: verificationProgress + '%' }"
                ></div>
              </div>
              <div class="progress-steps">
                <div class="step" :class="{ active: verificationStep >= 1 }">
                  <i class="fas fa-waveform"></i>
                  <span>音频分析</span>
                </div>
                <div class="step" :class="{ active: verificationStep >= 2 }">
                  <i class="fas fa-fingerprint"></i>
                  <span>特征提取</span>
                </div>
                <div class="step" :class="{ active: verificationStep >= 3 }">
                  <i class="fas fa-balance-scale"></i>
                  <span>相似度计算</span>
                </div>
                <div class="step" :class="{ active: verificationStep >= 4 }">
                  <i class="fas fa-check-circle"></i>
                  <span>验证完成</span>
                </div>
              </div>
            </div>

            <!-- 验证结果 -->
            <div class="verification-result" v-if="verificationResult">
              <div class="result-card" :class="verificationResult.status">
                <div class="result-icon">
                  <i :class="verificationResult.icon"></i>
                </div>
                <div class="result-content">
                  <h3>{{ verificationResult.title }}</h3>
                  <p>{{ verificationResult.message }}</p>
                  <div class="verification-details">
                    <div class="similarity-score">
                      <span>相似度: {{ verificationResult.similarity }}%</span>
                    </div>
                    <div class="verification-source" v-if="verificationResult.source">
                      <span>验证源: {{ verificationResult.source }}</span>
                    </div>
                    <div class="audio-duration" v-if="verificationResult.duration">
                      <span>音频时长: {{ verificationResult.duration }}秒</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="form-actions">
              <button 
                class="btn btn-primary" 
                @click="performVerification"
                :disabled="!canPerformVerification"
                v-if="selectedVoiceprint && (verifyRecordingTime > 0 || uploadedAudioFile)"
              >
                <i class="fas fa-check"></i> 开始验证
              </button>
              <button class="btn btn-secondary" @click="closeVerifyModal">
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时识别模态框 -->
    <div v-if="showLiveModal" class="modal-overlay" @click="closeLiveModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>实时声纹识别</h3>
          <button class="close-btn" @click="closeLiveModal">×</button>
        </div>
        <div class="modal-body">
          <div class="live-recognition">
            <div class="recording-area">
              <div class="recording-visual">
                <div class="microphone-icon" :class="{active: isRecording}">
                  <i class="fas fa-microphone"></i>
                </div>
                <div class="wave-animation" v-if="isRecording">
                  <div class="wave"></div>
                  <div class="wave"></div>
                  <div class="wave"></div>
                </div>
              </div>
              <div class="recording-controls">
                <button 
                  class="btn btn-primary" 
                  @click="toggleRecording"
                  :disabled="isProcessing"
                >
                  {{ isRecording ? '停止录音' : '开始录音' }}
                </button>
                <button 
                  class="btn btn-secondary" 
                  @click="clearRecording"
                  :disabled="isRecording"
                >
                  清除
                </button>
              </div>
            </div>
            <div class="recognition-results" v-if="liveResults.length > 0">
              <h4>识别结果</h4>
              <div class="result-list">
                <div 
                  v-for="result in liveResults" 
                  :key="result.id"
                  class="result-item"
                >
                  <div class="result-info">
                    <span class="target-name">{{ result.name }}</span>
                    <span class="confidence">置信度: {{ result.confidence }}%</span>
                  </div>
                  <div class="result-bar">
                    <div 
                      class="confidence-fill" 
                      :style="{width: result.confidence + '%'}"
                      :class="getConfidenceClass(result.confidence)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 数据状态
const registeredVoices = ref(12)
const recognitionAccuracy = ref(96.8)
const verificationCount = ref(28)
const suspiciousDetected = ref(3)

// 模态框状态
const showLiveModal = ref(false)
const showAddModal = ref(false)
const showVerifyModal = ref(false)

// 录音状态
const isRecording = ref(false)
const isProcessing = ref(false)
const liveResults = ref([])

// 添加声纹相关状态
const isRecordingAdd = ref(false)
const isProcessingAdd = ref(false)
const recordingTime = ref(0)
const recordingTimer = ref(null)
const newVoiceprint = ref({
  name: '',
  relationship: '本人'
})

// 验证声纹相关状态
const isRecordingVerify = ref(false)
const isProcessingVerify = ref(false)
const verifyRecordingTime = ref(0)
const verifyRecordingTimer = ref(null)
const selectedVoiceprint = ref(null)
const verificationResult = ref(null)
const verificationMethod = ref('record') // 'record' or 'upload'
const uploadedAudioFile = ref(null)
const fileInput = ref(null)
const audioPlayer = ref(null)
const audioDuration = ref(0)
const isDragOver = ref(false)

// 验证进度相关状态
const verificationProgress = ref(0)
const verificationProgressText = ref('')
const verificationStep = ref(0)

// 声纹库列表
const voiceprintList = ref([
  {
    id: 1,
    name: '张三',
    relationship: '本人',
    duration: 30,
    quality: 95,
    createdAt: '2024-01-15'
  },
  {
    id: 2,
    name: '李四',
    relationship: '家人',
    duration: 25,
    quality: 92,
    createdAt: '2024-01-10'
  },
  {
    id: 3,
    name: '王五',
    relationship: '朋友',
    duration: 35,
    quality: 88,
    createdAt: '2024-01-08'
  },
  {
    id: 4,
    name: '赵六',
    relationship: '同事',
    duration: 28,
    quality: 91,
    createdAt: '2024-01-05'
  }
])

// 最近检测记录
const recentDetections = ref([
  {
    id: 1,
    timestamp: '2024-01-20 14:30:25',
    type: '声纹验证',
    targetName: '张三',
    similarity: 94,
    result: '匹配'
  },
  {
    id: 2,
    timestamp: '2024-01-20 13:45:12',
    type: '可疑通话',
    targetName: '未知',
    similarity: 23,
    result: '异常'
  },
  {
    id: 3,
    timestamp: '2024-01-20 11:20:45',
    type: '声纹验证',
    targetName: '李四',
    similarity: 89,
    result: '匹配'
  },
  {
    id: 4,
    timestamp: '2024-01-20 10:15:33',
    type: '实时识别',
    targetName: '王五',
    similarity: 76,
    result: '可能'
  },
  {
    id: 5,
    timestamp: '2024-01-20 09:55:18',
    type: '声纹验证',
    targetName: '赵六',
    similarity: 91,
    result: '匹配'
  }
])

// 计算属性
const canSubmitVoiceprint = computed(() => {
  return newVoiceprint.value.name.trim() !== '' && recordingTime.value > 0
})

const canPerformVerification = computed(() => {
  return selectedVoiceprint.value && (verifyRecordingTime.value > 0 || uploadedAudioFile.value)
})

// 添加声纹相关方法
const showAddVoiceprintModal = () => {
  showAddModal.value = true
  resetAddForm()
}

const closeAddModal = () => {
  showAddModal.value = false
  if (isRecordingAdd.value) {
    stopAddRecording()
  }
  resetAddForm()
}

const resetAddForm = () => {
  newVoiceprint.value = {
    name: '',
    relationship: '本人'
  }
  recordingTime.value = 0
  isRecordingAdd.value = false
  isProcessingAdd.value = false
  if (recordingTimer.value) {
    clearInterval(recordingTimer.value)
    recordingTimer.value = null
  }
}

const toggleAddRecording = () => {
  if (isRecordingAdd.value) {
    stopAddRecording()
  } else {
    startAddRecording()
  }
}

const startAddRecording = () => {
  isRecordingAdd.value = true
  recordingTime.value = 0
  recordingTimer.value = setInterval(() => {
    recordingTime.value++
  }, 1000)
}

const stopAddRecording = () => {
  isRecordingAdd.value = false
  if (recordingTimer.value) {
    clearInterval(recordingTimer.value)
    recordingTimer.value = null
  }
}

const clearAddRecording = () => {
  recordingTime.value = 0
  if (recordingTimer.value) {
    clearInterval(recordingTimer.value)
    recordingTimer.value = null
  }
}

const submitVoiceprint = () => {
  if (!canSubmitVoiceprint.value) return
  
  isProcessingAdd.value = true
  
  // 模拟添加声纹的处理时间
  setTimeout(() => {
    const newId = Math.max(...voiceprintList.value.map(v => v.id)) + 1
    const newVoiceprintData = {
      id: newId,
      name: newVoiceprint.value.name,
      relationship: newVoiceprint.value.relationship,
      duration: recordingTime.value,
      quality: Math.floor(Math.random() * 20) + 80, // 80-100 随机质量评分
      createdAt: new Date().toISOString().split('T')[0]
    }
    
    voiceprintList.value.unshift(newVoiceprintData)
    registeredVoices.value++
    
    // 添加到检测记录
    const detectionRecord = {
      id: Math.max(...recentDetections.value.map(r => r.id)) + 1,
      timestamp: new Date().toLocaleString(),
      type: '声纹注册',
      targetName: newVoiceprint.value.name,
      similarity: newVoiceprintData.quality,
      result: '成功'
    }
    recentDetections.value.unshift(detectionRecord)
    
    isProcessingAdd.value = false
    closeAddModal()
    
    // 显示成功消息
    alert(`声纹"${newVoiceprint.value.name}"添加成功！`)
  }, 2000)
}

// 验证声纹相关方法
const showVerifyVoiceprintModal = () => {
  showVerifyModal.value = true
  resetVerifyForm()
}

const closeVerifyModal = () => {
  showVerifyModal.value = false
  if (isRecordingVerify.value) {
    stopVerifyRecording()
  }
  resetVerifyForm()
}

const resetVerifyForm = () => {
  selectedVoiceprint.value = null
  verificationResult.value = null
  verifyRecordingTime.value = 0
  isRecordingVerify.value = false
  isProcessingVerify.value = false
  verificationMethod.value = 'record'
  // 重置进度条状态
  verificationProgress.value = 0
  verificationProgressText.value = ''
  verificationStep.value = 0
  if (verifyRecordingTimer.value) {
    clearInterval(verifyRecordingTimer.value)
    verifyRecordingTimer.value = null
  }
  uploadedAudioFile.value = null
  audioDuration.value = 0
  isDragOver.value = false
  if (audioPlayer.value) {
    audioPlayer.value.pause()
    audioPlayer.value.src = ''
  }
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

const selectVoiceprintForVerify = (voiceprint) => {
  selectedVoiceprint.value = voiceprint
  verificationResult.value = null
}

const toggleVerifyRecording = () => {
  if (isRecordingVerify.value) {
    stopVerifyRecording()
  } else {
    startVerifyRecording()
  }
}

const startVerifyRecording = () => {
  isRecordingVerify.value = true
  verifyRecordingTime.value = 0
  verifyRecordingTimer.value = setInterval(() => {
    verifyRecordingTime.value++
  }, 1000)
}

const stopVerifyRecording = () => {
  isRecordingVerify.value = false
  if (verifyRecordingTimer.value) {
    clearInterval(verifyRecordingTimer.value)
    verifyRecordingTimer.value = null
  }
}

const clearVerifyRecording = () => {
  verifyRecordingTime.value = 0
  verificationResult.value = null
  // 重置进度条状态
  verificationProgress.value = 0
  verificationProgressText.value = ''
  verificationStep.value = 0
  if (verifyRecordingTimer.value) {
    clearInterval(verifyRecordingTimer.value)
    verifyRecordingTimer.value = null
  }
}

const performVerification = () => {
  if (!canPerformVerification.value) return
  
  isProcessingVerify.value = true
  verificationProgress.value = 0
  verificationStep.value = 0
  verificationProgressText.value = '正在启动验证...'
  
  // 模拟验证处理的进度条动画
  const progressInterval = setInterval(() => {
    verificationProgress.value += 2
    
    if (verificationProgress.value >= 20 && verificationStep.value < 1) {
      verificationStep.value = 1
      verificationProgressText.value = '正在分析音频特征...'
    } else if (verificationProgress.value >= 40 && verificationStep.value < 2) {
      verificationStep.value = 2
      verificationProgressText.value = '正在提取声纹特征...'
    } else if (verificationProgress.value >= 70 && verificationStep.value < 3) {
      verificationStep.value = 3
      verificationProgressText.value = '正在计算相似度...'
    } else if (verificationProgress.value >= 90 && verificationStep.value < 4) {
      verificationStep.value = 4
      verificationProgressText.value = '正在生成验证结果...'
    }
    
    if (verificationProgress.value >= 100) {
      clearInterval(progressInterval)
      verificationProgressText.value = '验证完成！'
      
      // 延迟显示结果
      setTimeout(() => {
        let duration
        let verificationSource
        let isMatch
        
        if (verificationMethod.value === 'upload' && uploadedAudioFile.value) {
          // 基于上传的音频文件进行验证
          duration = audioDuration.value
          verificationSource = `上传音频文件: ${uploadedAudioFile.value.name}`
          // 根据音频长度判断：5秒以内为正确，超过5秒为错误
          isMatch = duration <= 5
        } else {
          // 基于录制的声纹进行验证
          duration = verifyRecordingTime.value
          verificationSource = `录制声纹 (${verifyRecordingTime.value}秒)`
          // 根据录制时长判断：5秒以内为正确，超过5秒为错误
          isMatch = duration <= 5
        }
        
        // 基于验证结果设置相似度
        const similarity = isMatch ? 
          Math.floor(Math.random() * 15) + 85 : // 85-100% 高相似度
          Math.floor(Math.random() * 30) + 30   // 30-60% 低相似度
        
        verificationResult.value = {
          status: isMatch ? 'success' : 'failed',
          title: isMatch ? '验证成功' : '验证失败',
          message: isMatch ? 
            `声纹匹配成功，与"${selectedVoiceprint.value.name}"的相似度很高，音频时长在有效范围内` : 
            `声纹匹配失败，验证未通过`,
          similarity: similarity,
          icon: isMatch ? 'fas fa-check-circle' : 'fas fa-times-circle',
          source: verificationSource,
          duration: duration
        }
        
        // 添加到检测记录
        const detectionRecord = {
          id: Math.max(...recentDetections.value.map(r => r.id)) + 1,
          timestamp: new Date().toLocaleString(),
          type: verificationMethod.value === 'upload' ? '音频文件验证' : '声纹验证',
          targetName: selectedVoiceprint.value.name,
          similarity: similarity,
          result: isMatch ? '匹配' : '不匹配'
        }
        recentDetections.value.unshift(detectionRecord)
        
        // 更新验证次数
        verificationCount.value++
        
        isProcessingVerify.value = false
      }, 500)
    }
  }, 40) // 每40ms更新一次进度
}

const verifyWithVoiceprint = (voiceprint) => {
  selectedVoiceprint.value = voiceprint
  showVerifyModal.value = true
  resetVerifyForm()
  selectedVoiceprint.value = voiceprint
}

// 音频文件上传相关方法
const triggerFileUpload = () => {
  fileInput.value.click()
}

const handleFileSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    uploadedAudioFile.value = file
    audioDuration.value = 0 // 清空录音时长
    if (audioPlayer.value) {
      audioPlayer.value.src = URL.createObjectURL(file)
      audioPlayer.value.load() // 重新加载音频以获取新的时长
    }
  }
}

const handleDrop = (event) => {
  event.preventDefault()
  const file = event.dataTransfer.files[0]
  if (file) {
    uploadedAudioFile.value = file
    audioDuration.value = 0 // 清空录音时长
    if (audioPlayer.value) {
      audioPlayer.value.src = URL.createObjectURL(file)
      audioPlayer.value.load() // 重新加载音频以获取新的时长
    }
  }
  isDragOver.value = false
}

const updateAudioDuration = () => {
  if (audioPlayer.value && audioPlayer.value.duration) {
    audioDuration.value = Math.round(audioPlayer.value.duration)
  }
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const clearUploadedFile = () => {
  uploadedAudioFile.value = null
  audioDuration.value = 0
  // 重置进度条状态
  verificationProgress.value = 0
  verificationProgressText.value = ''
  verificationStep.value = 0
  if (audioPlayer.value) {
    audioPlayer.value.pause()
    audioPlayer.value.src = ''
  }
}

const audioPreviewUrl = computed(() => {
  if (uploadedAudioFile.value) {
    return URL.createObjectURL(uploadedAudioFile.value)
  }
  return ''
})

// 原有方法
const navigateToManagement = () => {
  router.push('/user/voiceprint/management')
}

const navigateToComparison = () => {
  router.push('/user/voiceprint/comparison')
}

const navigateToAnalysis = () => {
  router.push('/user/voiceprint/analysis')
}

const showLiveRecognition = () => {
  showLiveModal.value = true
}

const closeLiveModal = () => {
  showLiveModal.value = false
  if (isRecording.value) {
    stopRecording()
  }
}

const toggleRecording = () => {
  if (isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }
}

const startRecording = () => {
  isRecording.value = true
  // 模拟实时识别结果
  setTimeout(() => {
    if (isRecording.value) {
      liveResults.value = [
        { id: 1, name: '张三', confidence: 92 },
        { id: 2, name: '李四', confidence: 67 },
        { id: 3, name: '王五', confidence: 45 }
      ]
    }
  }, 3000)
}

const stopRecording = () => {
  isRecording.value = false
  isProcessing.value = false
}

const clearRecording = () => {
  liveResults.value = []
}

const showAddVoiceprint = () => {
  showAddVoiceprintModal()
}

const editVoiceprint = (voiceprint) => {
  router.push(`/user/voiceprint/management?action=edit&id=${voiceprint.id}`)
}

const deleteVoiceprint = (id) => {
  if (confirm('确定要删除这个声纹吗？')) {
    voiceprintList.value = voiceprintList.value.filter(v => v.id !== id)
    registeredVoices.value--
  }
}

const playVoiceprint = (voiceprint) => {
  alert(`播放 ${voiceprint.name} 的声纹音频`)
}

const testVoiceprint = (voiceprint) => {
  verifyWithVoiceprint(voiceprint)
}

const viewDetectionDetail = (record) => {
  alert(`查看检测记录详情: ${record.id}`)
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString()
}

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleString()
}

const getSimilarityClass = (similarity) => {
  if (similarity >= 80) return 'high'
  if (similarity >= 60) return 'medium'
  return 'low'
}

const getConfidenceClass = (confidence) => {
  if (confidence >= 80) return 'high'
  if (confidence >= 60) return 'medium'
  return 'low'
}

onMounted(() => {
  // 页面加载时的初始化操作
})
</script>

<style scoped>
.voiceprint-index {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .voiceprint-index {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .voiceprint-index {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .voiceprint-index {
    width: 100%;
    padding: 10px;
  }
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.overview-section {
  margin-bottom: 30px;
}

.row {
  display: flex;
  margin: 0 -10px;
}

.col-md-3 {
  flex: 0 0 25%;
  padding: 0 10px;
}

.col-sm-6 {
  flex: 0 0 50%;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
}

.card-icon {
  font-size: 24px;
  color: #1e3c72;
  margin-bottom: 10px;
}

.card-content h3 {
  color: #1e3c72;
  margin: 0 0 5px 0;
}

.card-content p {
  color: #666;
  margin: 0;
}

.quick-actions {
  margin-bottom: 30px;
}

.quick-actions h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.action-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.action-icon {
  font-size: 36px;
  color: #1e3c72;
  margin-bottom: 15px;
}

.action-item h3 {
  color: #1e3c72;
  margin: 0 0 10px 0;
}

.action-item p {
  color: #666;
  margin: 0;
}

.voiceprint-library {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  color: #1e3c72;
  margin: 0;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover {
  background: #2d4a87;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.voiceprint-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eee;
}



.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voiceprint-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voiceprint-icon i {
  color: #1e3c72;
  font-size: 18px;
}

.info-content {
}

.info-content h4 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.info-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.card-actions {
  display: flex;
  gap: 10px;
}

.btn-icon {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: #f5f5f5;
  color: #1e3c72;
}

.card-content {
  padding: 15px;
}

.voice-info {
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.info-item .label {
  color: #666;
}

.info-item .value {
  color: #1e3c72;
  font-weight: 500;
}

.voice-actions {
  display: flex;
  gap: 10px;
}

.recent-detections {
  margin-bottom: 30px;
}

.recent-detections h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.detection-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.detection-table table {
  width: 100%;
  border-collapse: collapse;
}

.detection-table th {
  background: #f8f9fa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #1e3c72;
  border-bottom: 1px solid #eee;
}

.detection-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.similarity-bar {
  position: relative;
  background: #f0f0f0;
  border-radius: 10px;
  height: 20px;
  min-width: 100px;
}

.similarity-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.similarity-fill.high {
  background: #28a745;
}

.similarity-fill.medium {
  background: #ffc107;
}

.similarity-fill.low {
  background: #dc3545;
}

.similarity-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.result-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.result-badge.匹配 {
  background: #d4edda;
  color: #155724;
}

.result-badge.异常 {
  background: #f8d7da;
  color: #721c24;
}

.result-badge.可能 {
  background: #fff3cd;
  color: #856404;
}

.result-badge.成功 {
  background: #d4edda;
  color: #155724;
}

.result-badge.不匹配 {
  background: #f8d7da;
  color: #721c24;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #1e3c72;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #1e3c72;
}

.modal-body {
  padding: 20px;
}

/* 添加声纹表单样式 */
.add-voiceprint-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #1e3c72;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #1e3c72;
}

.recording-section {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  background: #f9f9f9;
}

.recording-section h4 {
  margin: 0 0 15px 0;
  color: #1e3c72;
}

.recording-area {
  text-align: center;
  margin-bottom: 20px;
}

.recording-visual {
  position: relative;
  margin-bottom: 20px;
}

.microphone-icon {
  font-size: 48px;
  color: #1e3c72;
  margin-bottom: 20px;
  transition: color 0.2s ease;
}

.microphone-icon.active {
  color: #dc3545;
}

.wave-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
}

.wave {
  position: absolute;
  border: 2px solid #1e3c72;
  border-radius: 50%;
  opacity: 0;
  animation: wave-animation 2s infinite;
}

.wave:nth-child(1) {
  animation-delay: 0s;
}

.wave:nth-child(2) {
  animation-delay: 0.5s;
}

.wave:nth-child(3) {
  animation-delay: 1s;
}

@keyframes wave-animation {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

.recording-info {
  margin-bottom: 15px;
}

.recording-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.recording-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* 验证声纹样式 */
.verify-voiceprint-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.voiceprint-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.voiceprint-option {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voiceprint-option:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.option-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e8f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.option-icon i {
  color: #1e3c72;
  font-size: 14px;
}

.option-info h4 {
  margin: 0 0 2px 0;
  font-size: 14px;
  color: #1e3c72;
}

.option-info p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.selected-voiceprint {
  padding: 15px;
  background: #e8f4f8;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-voiceprint h4 {
  margin: 0;
  color: #1e3c72;
}

.verification-method {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
}

.method-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.method-option:hover {
  background: #e9ecef;
}

.method-option input[type="radio"] {
  transform: scale(1.2);
  margin-right: 5px;
}

.upload-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: #e9ecef;
}

.upload-zone {
  position: relative;
  width: 100%;
  height: 150px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.upload-zone.dragover {
  border-color: #1e3c72;
  background: #e9ecef;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.upload-content {
  color: #666;
  font-size: 16px;
}

.upload-icon {
  font-size: 48px;
  color: #1e3c72;
  margin-bottom: 15px;
}

.upload-hint {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-top: 15px;
}

.file-icon {
  font-size: 24px;
  color: #1e3c72;
  margin-right: 10px;
}

.file-details h4 {
  margin: 0 0 5px 0;
  color: #1e3c72;
}

.file-details p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.audio-preview {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
}

.audio-preview audio {
  width: 100%;
  border-radius: 6px;
}

.verification-progress {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.progress-header h4 {
  margin: 0;
  color: #1e3c72;
  font-size: 16px;
}

.progress-percentage {
  color: #666;
  font-weight: 600;
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
  animation: progressGlow 2s ease-in-out infinite alternate;
}

@keyframes progressGlow {
  0% {
    box-shadow: 0 0 5px rgba(30, 60, 114, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(30, 60, 114, 0.6);
  }
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
  background: #e8f4f8;
  border: 1px solid #b3d9e8;
}

.step i {
  font-size: 18px;
  color: #1e3c72;
  margin-bottom: 5px;
}

.step span {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.step.active span {
  color: #1e3c72;
  font-weight: 500;
}

.verification-result {
  margin-top: 20px;
}

.result-card {
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.result-card.success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.result-card.failed {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

.result-icon {
  font-size: 24px;
}

.result-card.success .result-icon {
  color: #155724;
}

.result-card.failed .result-icon {
  color: #721c24;
}

.result-content {
  flex: 1;
}

.result-content h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.result-card.success .result-content h3 {
  color: #155724;
}

.result-card.failed .result-content h3 {
  color: #721c24;
}

.result-content p {
  margin: 0 0 10px 0;
  color: #666;
}

.verification-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.similarity-score {
  font-weight: 500;
  color: #1e3c72;
}

.verification-source {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.audio-duration {
  font-size: 12px;
  color: #1e3c72;
  font-weight: 500;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
  
  .col-md-3 {
    flex: 1;
    margin-bottom: 15px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
  
  .library-grid {
    grid-template-columns: 1fr;
  }
  
  .detection-table {
    font-size: 14px;
  }
  
  .detection-table th,
  .detection-table td {
    padding: 8px;
  }
  
  .voiceprint-selection {
    grid-template-columns: 1fr;
  }
  
  .verification-method {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .method-option {
    width: 100%;
    justify-content: center;
    padding: 8px 15px;
  }

  .upload-area {
    padding: 20px;
  }

  .upload-zone {
    height: 120px;
  }

  .progress-steps {
    flex-direction: column;
    gap: 8px;
  }

  .step {
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px 10px;
    text-align: left;
  }

  .step i {
    margin-right: 8px;
    margin-bottom: 0;
  }

  .step span {
    text-align: left;
  }

  .modal-content {
    width: 95%;
    max-width: none;
  }
}
</style> 